<template>
  <div class="bottom-right">
    <div class="right-lables">
      <div class="hot">热度榜</div>
      <div class="more">
        <div @click="goRanking">更多</div>
        <img src="../../../assets/img/right.svg" alt="" />
      </div>
    </div>

    <div class="ranking" v-for="(item, index) in rankingLIst" :key="index">
      <div class="ranking-number">
        <img v-if="index == 0" src="../../../assets/img/one.svg" alt="" />
        <img v-if="index == 1" src="../../../assets/img/tow.svg" alt="" />
        <img v-if="index == 2" src="../../../assets/img/disan.svg" alt="" />
        <span v-if="index != 0 && index != 1 && index != 2">{{
          index + 1
        }}</span>
      </div>
      <div class="rankingimg">
        <img :src="item.giLogo" alt="" @click="goGame(item.giId)" />
      </div>
      <div class="ranking-message" @click="goGame(item.giId)">
        <div class="ranking-name">{{ item.giName }}</div>
        <div>
          <span>{{ item.gtName }}</span>
        </div>
        <div style="display: flex">
          <xing-2 :giScore="item.giScore"></xing-2>
          <div>{{ item.giScore }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import xing2 from "../../../components/ximg/xing2.vue";
export default {
  components: { xing2 },
  name: "BottomRight",
  props: {
    rankingLIst: {
      type: Array,
    },
  },
  created() {
    this.getXing();
  },
  methods: {
    getXing() {
      if (this.gameItem.giScore >= 8) {
        this.xing = 4;
        this.nxing = 1;
      } else if (this.gameItem.giScore >= 6) {
        this.xing = 3;
        this.nxing = 2;
      } else if (this.gameItem.giScore >= 4) {
        this.xing = 2;
        this.nxing = 3;
      } else if (this.gameItem.giScore >= 2) {
        this.xing = 1;
        this.nxing = 4;
      } else {
        this.xing = 0;
        this.nxing = 5;
      }
    },

    goGame(id) {
      this.$router.push({ name: "详情", params: { id: id } });
    },

    goRanking() {
      this.$router.push("/rankinglist");
    },
  },
};
</script>

<style>
.bottom-right {
  width: 26%;
  margin-left: 4%;
  margin-top: 0.2rem;
}

.right-lables {
  display: flex;
  align-items: center;
}

.hot {
  flex: 1;
  font-size: 0.15rem;
}

.more {
  display: flex;
  padding: 0.01rem 0.01rem 0.01rem 0.05rem;
  font-size: 0.09rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(212, 211, 210);
  border-radius: 0.03rem;
  cursor: pointer;
}

.more:hover {
  background-color: rgb(243, 245, 247);
}

.more img {
  width: 0.1rem;
  height: 0.1rem;
}

.ranking {
  display: flex;
  align-items: center;
  margin-top: 0.2rem;
  padding-bottom: 0.07rem;
  border-bottom: 1px solid rgb(206, 204, 202);
}

.ranking-number {
  flex: 1;
}

.ranking-number span {
  display: inline-block;
  width: 60%;
  text-align: center;
  font-size: 0.15rem;
  font-weight: bold;
  color: rgb(161, 161, 161);
}

.ranking-number img {
  width: 60%;
}

.rankingimg {
  flex: 1.2;
}

.rankingimg img {
  width: 100%;
  border-radius: 20%;
  cursor: pointer;
}

.ranking-message {
  flex: 4;
  margin-left: 5%;
  cursor: pointer;
}

.ranking-message:hover .ranking-name {
  color: rgb(125, 214, 250);
}

.ranking-message div:nth-child(1) {
  font-size: 0.1rem;
  margin-bottom: 0.05rem;
}

.ranking-message div:nth-child(2) span {
  border: 1px solid rgb(214, 213, 213);
  padding: 0.02rem 0.02rem 0.02rem 0.02rem;
  border-radius: 0.03rem;
  color: rgb(129, 129, 129);
}

.ranking-message div:nth-child(2) span:hover {
  color: rgb(108, 208, 248);
  border-color: rgb(108, 208, 248);
}

.ranking-lei:hover {
  display: none;
}

.ranking-message div:nth-child(3) {
  margin-top: 0.05rem;
}

.ranking-message div:nth-child(3) div {
  margin-left: 0.07rem;
  font-size: 0.09rem;
  color: rgb(129, 129, 129);
}
</style>